<script setup>
import { getFriendInfoAPI } from '@/apis/friendAPI'
import { getNewchatAPI } from '@/apis/chatAPI'
import { onMounted, ref } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import router from '@/router'
const route = useRoute()
const homeInfoList = ref([])
const getHomeInfo = async (friendId = route.params.friendId) => {
  const res = await getFriendInfoAPI(friendId)
  homeInfoList.value = res.data
  // console.log(homeInfoList.value);
}
onMounted(() => getHomeInfo())
onBeforeRouteUpdate((to) => {
  getHomeInfo(to.params.friendId)
})

// 发消息
const friendid = ref('')
const friendnodes = ref('')
const heads = ref({})

const submit = async () => {
  const friendId = friendid.value.innerText
  const friendNodes = friendnodes.value.innerText
  const head = heads.value.innerText
  // console.log(heads.value.innerText);
  await getNewchatAPI({ friendId, friendNodes, head })
  // 跳转路由
  router.replace({path:'/chat/list'})
}
</script>
<template>
  <div>
    <el-card shadow="hover" class="home-info">
      <div class="header">
        <!-- 头像 -->
        <div class="demo-fit">
          <div class="block">
            <el-avatar shape="square" :size="100" :src="homeInfoList[0]?.head" />
            <p ref="heads" v-show="false">{{ homeInfoList[0]?.head }} </p>
          </div>
        </div>
        <h1>{{ homeInfoList[0]?.friendNotes }}</h1>
        <p>昵称：{{ homeInfoList[0]?.nickname }}</p>
        <div class="friendid">
          <p>微信号：</p>
          <p ref="friendid">{{ homeInfoList[0]?.friendId }}</p>
        </div>
      </div>
      <hr>
      <div class="border">
        <ul>
          <li>
            <h2>备注名</h2>
            <p ref="friendnodes"> {{ homeInfoList[0]?.friendNotes }}</p>
          </li>
          <li>
            <h2>来源</h2>
            <p>{{ homeInfoList[0]?.city }}</p>
          </li>
        </ul>
      </div>
      <hr>
      <div class="footer">
        <button @click="submit">发消息</button>
      </div>


    </el-card>
  </div>
</template>


<style lang="scss" scoped>
.home-info {
  width: 50vw;
  height: 30vw;

  .header {
    height: 5vw;
    margin-bottom: 2vw;

    .friendid {
      p {
        display: inline-block;
      }
    }

    p {
      font-size: .8vw;
      margin-top: .55vw;
      color: #9e9e9e;
    }

    .demo-fit {
      float: left;
      margin-right: 1vw;
    }
  }

  .border {
    margin-bottom: 1.5vw;

    p {
      font-size: .9vw;
      color: #9e9e9e;
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;

    button {
      margin-top: 3vw;
      width: 20vw;
      height: 3vw;
      line-height: 3vw;
      background-color: #07c160;
      border-radius: .5vw;
      border: 0;
      font-size: 1vw;
      color: #fff;

      &:hover {
        background-color: #38cd7f;
      }
    }
  }
}
</style>